<template>
    <div class="home">
      <Header />
      <!-- 使用组件的 computed 属性或 data 属性来显示欢迎信息 -->
      <SideBar @update:selected-menu-item="HandleMenuItemSelection"/>
      <!-- <p>{{ selectedMenuItem }}</p> -->
      <div class="rightside">
        <div class="upper-content">
          
          <div class="contentC" >
          <!-- {{ content_inC }} -->
          <ContentC :year="2024" :month="6" @date-selected="handleDateSelected" />
          </div>
        </div>
        <div class="lower-content">
          <div class="contentA">
            <ContentA :pass_position="position" :token="token" :pass_SelectedMenuItem="selectedMenuItemA"> </ContentA>
          </div>
          <div class="contentB">
            <!-- {{content_inB}} -->
            <ContentB :pass_position="position" :token="token" :pass_SelectedMenuItem="selectedMenuItemB"> </ContentB>
          </div>
        </div>
        
        
      </div>
      <Footer/>

    </div>
  </template>
  
  <script setup>
  import { ref, computed, onMounted, watch } from 'vue';
  import { useRoute } from 'vue-router'; // 导入useRoute钩子
  import Header from '../components/Header_nav.vue';
  import Footer from '../components/Footer.vue';
  import ContentA from '../components/contentA.vue';
  import ContentB from '../components/contentB.vue';
  import ContentC from '../components/contentC.vue';
  import SideBar from '../components/SideBar.vue';

  // 使用ref创建响应式数据
  const route = useRoute();
  const selectedMenuItemA = ref('个人信息');
  const selectedMenuItemB = ref('薪资计算');
  const token = ref('');
  const position = ref('');
  const today= new Date().toISOString().slice(0, 10)


  // 使用onMounted代替created钩子
  onMounted(() => {
    token.value = route.query.token || '';
    position.value = route.query.position || '';
  });
  const handleDateSelected=(date)=>{
    console.log('Selected date:', date);
    // 处理选中的日期
  }
  const HandleMenuItemSelection=(menuItem)=>
  {
    if(menuItem==='个人信息'||menuItem==='假条申请'||menuItem==='假条管理')
    {
      selectedMenuItemA.value = menuItem;
    }
    if(menuItem==='薪资计算'||menuItem==='上班安排'||menuItem==='公费报销')
    {
      selectedMenuItemB.value = menuItem;
    }
  };
  // 监听路由参数的变化
  watch(() => route.query, (newQuery, oldQuery) => {
    token.value = newQuery.token || '';
    position.value = newQuery.position || '';
  }, { immediate: true, deep: true });


</script>
<style scoped>
/* 主页容器样式 */
.home {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin-left: 230px; /* 为侧边栏留出空间 */
  margin-top: 0px;
  padding: 20px;
  padding-top: 0px;
  overflow: hidden; /* 防止主页滚动 */
}

/* 右侧内容容器样式 */
.rightside {
  display: flex;
  flex-direction: column; /* 垂直排列子元素 */
  flex-grow: 1;
  padding: 10px;
  margin: 0px;
  background: #f5f5f5;
  overflow: auto; /* 允许内部容器滚动 */
}

/* 上部内容容器 */
.upper-content {
  width: 100%; /* 占满宽度 */
  /* 其他样式根据需要添加 */
}

/* 下部内容容器，包含 contentA 和 contentB */
.lower-content {
  display: flex;
  padding: 0;
  justify-content: space-between; /* 使用space-between来分布空间 */
  width: 100%; /* 占满宽度 */
  /* 其他样式根据需要添加 */
}
.contentA, .contentB {
  width: calc(50% - 40px); /* 设置宽度为容器的一半减去间隔 */
  margin: 0 20px; /* 左右外边距 */
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: transform 0.3s, box-shadow 0.3s;
  overflow: auto;
}


/* 内容框样式，定义 contentA, contentB 和 contentC 的样式 */
.contentA, .contentC, .contentB {
  width: 100%; /* 占满宽度 */
  padding: 20px;
  margin: 10px 0; /* 根据需要调整上边距 */
  background: #fff; /* 白色背景 */
  border-radius: 8px; /* 圆角边框 */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 轻微的阴影 */
  transition: transform 0.3s, box-shadow 0.3s; /* 悬停效果的过渡 */
  overflow: auto; /* 允许内容框内部滚动 */
}

/* 内容框悬停效果 */
.contentA:hover, .contentB:hover, .contentC:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}


/* 响应式设计 */
@media (max-width: 768px) {
  .home {
    margin-left: 0; /* 在小屏幕上不保留侧边栏空间 */
  }
  .rightside {
    flex-direction: column; /* 在小屏幕上垂直排列 */
  }
  .contentA, .contentB, .contentC {
    width: 100%; /* 在小屏幕上全宽显示 */
    margin: 10px 0; /* 调整间距 */
  }
}
</style>